<template>
  <div class="cs-page-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.id"
        placeholder="ID"
        style="width: 200px"
      ></el-input>
      <el-select clearable v-model="listQuery.status" placeholder="状态">
        <el-option label="待修改" :value="0"></el-option>
        <el-option label="待发布" :value="1"></el-option>
        <el-option label="发布完成" :value="2"></el-option>
        <el-option label="发布失败" :value="3"></el-option>
      </el-select>

      <el-select
        clearable
        v-model="listQuery.type"
        placeholder="内容源"
        @change="getSubTypeOptions()"
      >
        <el-option
          v-for="item in sourceTypeOptions"
          :key="item.id"
          :label="item.text"
          :value="item.id"
        ></el-option>
      </el-select>
      <!-- <el-tooltip
        class="item"
        effect="dark"
        content="请选择分类"
        placement="top"
      >
        <el-select
          clearable
          v-model="listQuery.subType"
          placeholder="分类"
          filterable
        >
          <el-option
            v-for="item in subTypeOptions"
            :key="item.id"
            :label="item.text"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-tooltip> -->

      <el-tooltip
        class="item"
        effect="dark"
        content="请选择是否包含图片"
        placement="top"
      >
        <el-select
          clearable
          v-model="listQuery.hasImage"
          placeholder="是否包含图片"
        >
          <el-option
            v-for="item in hasImageOptions"
            :key="item.id"
            :label="item.text"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-tooltip>

      <el-tooltip
        class="item"
        effect="dark"
        content="请选择是否包含视频"
        placement="top"
      >
        <el-select
          clearable
          v-model="listQuery.hasVideo"
          placeholder="是否包含视频"
        >
          <el-option
            v-for="item in hasVideoOptions"
            :key="item.id"
            :label="item.text"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-tooltip>

      <el-date-picker
        v-model="daterangeValue"
        type="datetimerange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="起始时间"
        end-placeholder="结束时间"
        value-format="yyyy-MM-dd HH:mm:ss"
        @change="daterangeChanged"
        :default-time="['00:00:00', '23:59:59']"
        :picker-options="daterangePickerOptions"
      >
      </el-date-picker>

      <el-button type="primary" @click="getList">查询</el-button>
      <el-button type="warning" @click="resetFilter">重置</el-button>
      <el-button type="primary" @click="handleAddContent">添加</el-button>
    </div>

    <div class="app-container calendar-list-container">
      <div>
        <el-checkbox
          v-model="checkedAll"
          style="margin-right: 10px"
          @change="handleAllCheck"
          >全选</el-checkbox
        >
        <!--<el-button type="warning" @click="bitchRecommend">批量推荐</el-button>-->
        <el-button type="danger" @click="bitchDelete">批量删除</el-button>

        <!-- <el-button type="success" @click="goSpiderSource" style="float: right"
          >编辑爬虫来源</el-button
        > -->
      </div>
      <div class="rec-li" v-for="item in list" :key="item.id">
        <div class="rec-li-head">
          <el-checkbox
            v-model="item.checked"
            @change="handleCheckedBoxChange"
          ></el-checkbox>
          <span style="color: red">ID: {{ item.id }}</span>
          <span> || {{ item.title }} </span>
          <span
            >||
            {{ item.updateTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span
          >
          <div class="button-group">
            <el-button
              type="warning"
              size="small"
              @click="addToRecommend(item.id)"
              v-if="item.bindRobotId != null"
              >加入发布队列</el-button
            >
            <el-button type="primary" size="small" @click="handleList(item)"
              >编辑</el-button
            >
            <el-button type="danger" size="small" @click="deleteItem(item.id)"
              >删除</el-button
            >
          </div>
        </div>
        <div class="rec-li-body">
          <div class="rec-li-body-left">
            <div class="user">
              <img
                class="avatar"
                :src="item.avater | imageUrl"
                @click="imgClick(item.avater)"
              />
              {{ item.avatar }}
              <div class="username">
                <span class="name">{{ item.nickname }}</span
                ><span class="sex">{{ item.sex | gender }}</span>
                <p>{{ item.signature == '' ? '暂无数据' : item.signature }}</p>
              </div>
            </div>

            <div class="tags">
              <el-tag
                type="success"
                size="small"
                v-for="(labelText, index) in item.label"
                style="margin-right: 10px"
                :key="index"
                >{{ labelText }}</el-tag
              >
            </div>
            <!-- <div>
              <el-tag type="primary" size="small">每日打卡</el-tag>
            </div> -->
            <div class="count">
              <!-- <span>阅读:{{ item.readedCount }}</span>
              <span>转发:{{ item.repostCount }}</span>
              <span>评论:{{ item.commentCount }}</span>
              <span>点赞:{{ item.likeCount }}</span>
              <span>热度:{{ item.hotCount }}</span>
              <span>时长:{{ item.duration }}</span> -->
              <!-- <span> 标题: {{item.title}} </span> -->
              {{ item.type | sourceFilter }}-{{ item.subType }}
            </div>
          </div>
          <div class="rec-li-body-right">
            <div class="article-content">​​{{ item.content }}</div>
            <template v-if="!!item.videoUrls">
              <div
                class="video-cover"
                @click="openVideoDialog(item.videoUrls.url)"
              >
                <img
                  class="video-img"
                  alt=""
                  :src="item.videoUrls.thumb | imageUrl"
                  style="cursor: pointer;display: block; width: 200px; height: 150px"
                />
                <div class="video-play">
                  <svg-icon icon-class="play-video" />
                </div>
              </div>
            </template>
            <template v-else>
              <div class="article-images">
                <template v-for="(img, i) in item.images">
                  <img
                    v-if="i < 10"
                    class="avatar"
                    :src="img.url | imageUrl"
                    :key="img.url"
                    @click="imgClick(img.url)"
                  />
                </template>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>

    <TablePagination
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChangeOffset"
      :current-page="listQuery.page"
      :limit="listQuery.limit"
      :total="total"
      :loading="listLoading"
    >
    </TablePagination>

    <el-dialog
      :title="operationFormTitle"
      :visible.sync="operationFormVisible"
      class="rec-dialog"
      width="90%"
      @click.native="saveAll"
    >
      <el-row :gutter="40">
        <el-col :span="12" style="border-right: 1px dashed #0a0a0a">
          <el-form
            :rules="rules"
            class="small-space"
            :model="operationInfo"
            label-position="left"
            label-width="90px"
            ref="operationInfo"
          >
            <el-form-item label="内容源">
              {{ operationInfo.type | sourceFilter }}-{{
                operationInfo.subType
              }}
            </el-form-item>

            <el-form-item label="发布时间" prop="publishTime">
              <el-date-picker
                v-model="operationInfo.publishTime"
                type="datetime"
                @change="publishTimeChange"
                placeholder="选择日期时间"
              >
              </el-date-picker>
              <el-button @click="morning">上午</el-button>
              <el-button @click="afternoon">下午</el-button>
              <el-button @click="evening">晚上</el-button>
            </el-form-item>

            <el-form-item label="话题" prop="topicId">
              <el-select
                filterable
                clearable
                multiple
                v-model="operationInfo.topicId"
                placeholder="话题"
                @change="topicChanged"
              >
                <el-option
                  v-for="item in topicOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="机器人ID">
              <el-input
                v-model="operationInfo.robotId"
                style="width: 300px"
              ></el-input>
              <el-button @click="searchRobot">查询</el-button>
              <el-button @click="changeRobotId">换一换</el-button>
            </el-form-item>

            <el-form-item label="昵称">
              {{ operationInfo.nickname }}
            </el-form-item>

            <el-form-item label="头像">
              <img
                :src="operationInfo.avatar | imageUrl"
                style="width: 90px; height: 90px"
              />
            </el-form-item>

            <el-form-item label="性别">
              {{ operationInfo.sex | gender }}
            </el-form-item>

            <el-form-item label="个性签名">
              {{ operationInfo.signature }}
            </el-form-item>

            <el-form-item label="标签">
              <el-tag
                :key="tag"
                size="small"
                type="success"
                v-for="tag in operationInfo.label"
                closable
                :disable-transitions="false"
                @close="handleTagClose(tag)"
                style="margin-right: 5px"
              >
                {{ tag }}
              </el-tag>
              <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
              >
              </el-input>
              <el-button
                v-else
                class="button-new-tag"
                size="small"
                @click="showInput"
                >+ 添加标签</el-button
              >
            </el-form-item>
            <el-form-item label="标题" prop="title">
              <el-input placeholder="请输入标题" v-model="operationInfo.title">
              </el-input>
            </el-form-item>
            <el-form-item label="正文" prop="content">
              <el-input
                type="textarea"
                :autosize="{ minRows: 2 }"
                placeholder="请输入内容"
                v-model="operationInfo.content"
              >
              </el-input>
            </el-form-item>

            <el-form-item label="图片" prop="pictures">
              <ul class="el-upload-list" style="display: flex; flex-wrap: wrap">
                <li v-for="(pic, i) in operationInfo.images" :key="i">
                  <el-image
                    :src="pic.url | imageUrl"
                    style="width: 100px; height: 100px; margin: 20px"
                    :fit="'contain'"
                    @click="imgClick(pic.url)"
                  >
                  </el-image>
                  <i
                    class="el-icon-close"
                    style="position: absolute"
                    @click="handleRemoveImage(operationInfo.images, i)"
                  ></i>
                </li>
              </ul>
              <el-upload
                action="/console/api/upload/image"
                :show-file-list="false"
                :multiple="true"
                :on-success="handleImageOK"
              >
                <el-button slot="trigger" size="small" type="primary"
                  >选取文件</el-button
                >
              </el-upload>
            </el-form-item>
            <el-form-item label="视频" prop="video">
              <!-- <ul class="el-upload-list" style="display: flex; flex-wrap: wrap">
                <li v-for="(pic, i) in operationInfo.video" :key="i"> -->
              <template v-if="operationInfo.video">
                <el-image
                  :src="operationInfo.video.thumb | imageUrl"
                  style="width: 100px; height: 100px; margin: 20px"
                  :fit="'contain'"
                  @click="openVideoDialog(operationInfo.video.url)"
                >
                </el-image>
                <i
                  class="el-icon-close"
                  style="position: absolute"
                  @click="handleRemoveVideo()"
                ></i>
              </template>
              <!-- </li> -->
              <!-- </ul> -->
              <el-upload
                action="/console/api/upload/video"
                :show-file-list="false"
                :multiple="true"
                :on-success="handleVideoOK"
                accept="video/*"
              >
                <el-button slot="trigger" size="small" type="primary"
                  >选择视频</el-button
                >
              </el-upload>
            </el-form-item>

            <el-form-item label="阅读" prop="topic">
              <el-input
                type="number"
                v-model.number="operationInfo.readedCount"
                style="width: 200px"
              ></el-input>
            </el-form-item>

            <el-form-item label="转发" prop="topic">
              <el-input
                type="number"
                v-model.number="operationInfo.repostCount"
                style="width: 200px"
              ></el-input>
            </el-form-item>

            <el-form-item label="评论" prop="topic">
              <el-input
                type="number"
                v-model.number="operationInfo.commentCount"
                style="width: 200px"
              ></el-input>
            </el-form-item>

            <el-form-item label="点赞" prop="topic">
              <el-input
                type="number"
                v-model.number="operationInfo.likeCount"
                style="width: 200px"
              ></el-input>
            </el-form-item>

            <el-form-item label="热度" prop="topic">
              <el-input
                type="number"
                v-model.number="operationInfo.hotCount"
                style="width: 200px"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12" style="height: 915px; overflow-y: scroll">
          <el-tabs v-model="activeName">
            <el-tab-pane label="评论管理" name="first">
              <!-- <comments-list
                :list="commentList"
                ref="commentsList"
              ></comments-list> -->
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button
          type="warning"
          @click="confirm(1)"
          :disabled="
            operationInfo.robotId == '' ||
              operationInfo.robotId == null ||
              operationInfo.topicId == ''
          "
          >保存并加入发布队列</el-button
        >
        <el-button type="primary" @click="confirm(2)">保 存</el-button>
        <el-button @click="operationFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="dialogFormVisible"
      :show-close="false"
      close-on-click-modal
      class="img-dialog"
    >
      <img @click="closeDialog" :src="dialogImgSrc" />
    </el-dialog>

    <ImageViewer
      :visible.sync="videoDialogVisible"
      :url="videoUrl | imageUrl"
      :type="'video'"
    />
  </div>
</template>

<script>
import DATEPICKER_OPTIONS from '@/config/datepickerOptions'
// import { parseTime } from "@/filters/index";
// import CommentsList from "./components/commentsList";
// import VPlayer from "@/components/VPlayer/index";
import TablePagination from '@/components/TablePagination'
import ImageViewer from '@/components/ImageViewer'
// import UploadFile from "@/components/UploadFile";
import {
  xhrListArticles,
  xhrUpdateArticle,
  xhrDeleteArticle,
  xhrTopicList,
  xhrRobotInfo,
  xhrRandomRobot,
  xhrPublishContent
} from '@api/jwContent'
import { retry } from 'ali-oss/lib/common/utils/retry'
export default {
  name: 'warehouse',
  components: { TablePagination, ImageViewer },
  data() {
    const strLength = str => {
      let result = 0
      for (let i = 0; i < str.length; i++) {
        if (str.charCodeAt(i) >= 0 && str.charCodeAt(i) <= 128) {
          result += 1
        } else {
          result += 2
        }
      }
      return result / 2
    }
    return {
      videoPlayerState: true,
      videoDialogVisible: false,
      videoUrl: '',
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        offset: 0,
        limit: 10,
        startTime: null,
        endTime: null,
        isRecommend: 0,
        orderBy: 'update_time',
        orderType: 'desc'
      },
      rules: {
        // title: [{ required: true, message: "不能为空", trigger: "change" },
        //   { min: 5, max: 20, message: '长度在 5-20个字符', trigger: 'blur' }
        // ],
        title: [
          {
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('不能为空'))
              } else {
                const l = strLength(value)
                if (l > 20 || l < 5) {
                  callback(new Error('长度在5-20个字符(英文/标点0.5, 中文1)'))
                } else {
                  callback()
                }
              }
            },
            trigger: 'blur'
          }
        ],
        content: [
          {
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('不能为空'))
              } else {
                const l = strLength(value)
                if (l > 5000) {
                  callback(new Error('长度在0-5000个字符(英文/标点0.5, 中文1)'))
                } else {
                  callback()
                }
              }
            },
            trigger: 'blur'
          }
        ],
        topicId: [{ required: true, message: '不能为空', trigger: 'change' }],
        publishTime: [
          { required: true, message: '不能为空', trigger: 'change' }
        ]
      },
      commentList: [],
      daterangePickerOptions: DATEPICKER_OPTIONS.daterangePickerOptions,
      daterangeValue: '',
      operationFormTitle: '',
      operationFormVisible: false,
      operationInfo: {},
      sourceTypeOptions: [
        { id: 0, text: '微博' },
        { id: 1, text: '兵人' },
        { id: 2, text: 'NGA' },
        { id: 3, text: '控制台发布' }
      ],
      subTypeOptions: [],
      hasImageOptions: [
        { id: 0, text: '不包含图片' },
        { id: 1, text: '包含图片' }
      ],
      hasVideoOptions: [
        { id: 0, text: '不包含视频' },
        { id: 1, text: '包含视频' }
      ],
      topicOptions: [],
      dialogImageUrl: '',
      dialogVisible: false,
      inputVisible: false,
      inputValue: '',
      checkedAll: false,
      dialogFormVisible: false,
      dialogImgSrc: '',
      activeName: 'first',
      commentImgs: []
    }
  },
  filters: {
    sexFilter(id) {
      const sexMap = {
        0: '女',
        1: '男'
      }
      return sexMap[id]
    },
    sourceFilter(id) {
      const sourceMap = {
        0: '微博',
        1: '兵人',
        2: 'NGA',
        3: '控制台发布'
      }
      return sourceMap[id]
    }
  },
  computed: {
    uploadImg() {
      return this.baseUrl + 'ContentDelivery/uploadImage'
    }
  },
  created() {
    this.getList()
    this.getTopicOption()
  },
  methods: {
    changeRobotId() {
      xhrRandomRobot().then(resp => {
        const robot = resp.data.robot
        this.operationInfo.robotId = robot.userId
        this.operationInfo.sex = robot.gender
        this.operationInfo.nickname = robot.nickname
        this.operationInfo.avatar = robot.avatar
        this.operationInfo.signature = robot.sign
      })
    },
    searchRobot(id) {
      if (!this.operationInfo.robotId) {
        this.$message.error('请输入机器人id..')
        return
      }
      xhrRobotInfo(this.operationInfo.robotId).then(resp => {
        const robot = resp.data
        // this.operationInfo.robotId = robot.userId;
        this.operationInfo.sex = robot.gender
        this.operationInfo.nickname = robot.nickname
        this.operationInfo.avatar = robot.avatar
        this.operationInfo.signature = robot.sign
      })
    },
    getRndInteger(min, max) {
      return Math.floor(Math.random() * (max - min)) + min
    },
    morning() {
      let tempDate = new Date()
      tempDate.setHours(this.getRndInteger(7, 12))
      tempDate.setMinutes(this.getRndInteger(0, 60))
      tempDate.setSeconds(this.getRndInteger(0, 60))
      this.operationInfo.publishTime = tempDate.getTime()
    },
    afternoon() {
      let tempDate = new Date()
      tempDate.setHours(this.getRndInteger(12, 19))
      tempDate.setMinutes(this.getRndInteger(0, 60))
      tempDate.setSeconds(this.getRndInteger(0, 60))
      this.operationInfo.publishTime = tempDate.getTime()
    },
    evening() {
      let tempDate = new Date()
      tempDate.setHours(this.getRndInteger(19, 24))
      tempDate.setMinutes(this.getRndInteger(0, 60))
      tempDate.setSeconds(this.getRndInteger(0, 60))
      this.operationInfo.publishTime = tempDate.getTime()
    },
    handleRemoveImage(pictures, i) {
      pictures.splice(i, 1)
    },
    handleRemoveVideo() {
      this.operationInfo.video = null
    },
    handleImageOK(pic) {
      if (!this.operationInfo.images) {
        this.operationInfo.images = []
      }
      this.operationInfo.images.push(pic.data)
    },
    handleVideoOK(pic) {
      this.operationInfo.video = pic.data
    },
    openVideoDialog(url) {
      this.videoDialogVisible = true
      this.videoUrl = url
    },
    getSubTypeOptions() {
      // this.$get("ContentDelivery/subTypeOption", this.listQuery).then(
      //   (resp) => {
      //     this.subTypeOptions = resp.data.items;
      //   }
      // );
    },
    closePlay() {},
    doSearch() {
      this.getList()
    },
    getList() {
      this.checkedAll = false
      this.listLoading = true
      xhrListArticles(this.listQuery).then(resp => {
        this.list = resp.data.list
        this.total = resp.data.count
        this.listLoading = false
      })
    },
    getTopicOption() {
      xhrTopicList({ limit: 1000 }).then(resp => {
        this.topicOptions = resp.data.list
      })
    },
    sortByKey(array, key) {
      return array.sort(function(a, b) {
        var x = a[key]
        var y = b[key]
        return x < y ? -1 : x > y ? 1 : 0
      })
    },
    goSpiderSource() {
      this.$router.push({ path: '/material-manage/spider-source' })
    },

    handleAddContent() {
      let randomTime =
        new Date().getTime() + 24 * 3600 * Math.random().toFixed(2) * 1000
      // this.$refs["operationInfo"].resetFields();
      this.operationFormTitle = '编辑内容'
      this.operationInfo = {
        type: 3,
        id: null,
        subType: '控制台发布',
        updateTime: '',
        publishTime: randomTime,
        robotId: '',
        nickname: '',
        avatar: '',
        sex: 1,
        signature: '',
        label: [],
        topicId: [],
        title: '',
        content: '',
        images: [],
        video: null,
        readedCount: 0,
        repostCount: 0,
        commentCount: 0,
        likeCount: 0,
        hotCount: 0
      }
      this.operationFormVisible = true
    },

    handleList(row) {
      this.operationFormVisible = true
      let randomTime =
        new Date().getTime() + 24 * 3600 * Math.random().toFixed(2) * 1000
      this.$nextTick(() => {
        this.$refs['operationInfo'].resetFields()
        this.operationFormTitle = '编辑内容'
        this.commentImgs = row.images.slice()
        this.operationInfo = {
          type: row.type,
          id: row.id,
          subType: row.subType,
          updateTime: row.updateTime,
          publishTime: randomTime,
          robotId: row.bindRobotId,
          nickname: row.nickname,
          avatar: row.avater,
          sex: row.sex,
          signature: row.signature,
          label: row.label || [],
          topicId: row.topicId || [],
          title: row.title,
          content: row.content,
          images: row.images,
          video: row.videoUrls,
          readedCount: row.readedCount,
          repostCount: row.repostCount,
          commentCount: row.commentCount,
          likeCount: row.likeCount,
          hotCount: row.hotCount
        }
      })
    },
    confirm(type) {
      this.$refs.operationInfo.validate(valid => {
        if (!valid) {
          return
        }
        let param = {
          id: this.operationInfo.id,
          publishTime: this.operationInfo.publishTime,
          bindRobotId: this.operationInfo.robotId,
          nickname: this.operationInfo.nickname,
          avater: this.operationInfo.avatar,
          sex: this.operationInfo.sex,
          signature: this.operationInfo.signature,
          label: this.operationInfo.label,
          topicId: this.operationInfo.topicId,
          title: this.operationInfo.title,
          content: this.operationInfo.content,
          images: this.operationInfo.images,
          voiceUrl: '',
          videoUrls: this.operationInfo.video,
          readedCount: this.operationInfo.readedCount,
          repostCount: this.operationInfo.repostCount,
          commentCount: this.operationInfo.commentCount,
          likeCount: this.operationInfo.likeCount,
          hotCount: this.operationInfo.hotCount,
          comments: this.commentList
        }

        xhrUpdateArticle(param).then(resp => {
          if (resp.status === 200) {
            if (!param.id) {
              param.id = resp.data.id
            }
            if (type == 2) {
              this.getList()
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.operationFormVisible = false
            }
            if (type == 1) {
              this.addToRecommend(param.id)
            }
          } else {
            this.$message({
              message: resp.msg,
              type: 'error'
            })
          }
        })
      })
    },
    uploadSuccess(fileUrl) {
      let imgs = []
      fileUrl.forEach(img => {
        imgs.push({
          url: img.name
        })
      })
      this.commentImgs = imgs
    },
    handleRemoveImg(fileList) {
      let imgs = []
      fileList.forEach(img => {
        imgs.push({
          url: img.name
        })
      })
      this.commentImgs = imgs
    },
    handleTagClose(tag) {
      this.operationInfo.label.splice(this.operationInfo.label.indexOf(tag), 1)
    },

    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },

    handleInputConfirm() {
      let inputValue = this.inputValue
      if (inputValue) {
        this.operationInfo.label.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    handleCheckedBoxChange(value) {
      this.checkedAll = this.list.every((item, index, array) => {
        return item.checked === true
      })
    },
    bitchRecommend() {
      let checkedIds = []
      this.list.forEach((item, index, arr) => {
        if (item.checked) {
          checkedIds.push(item.id)
        }
      })
      console.log(checkedIds)
    },
    bitchDelete() {
      let checkedIds = []
      this.list.forEach((item, index, arr) => {
        if (item.checked) {
          checkedIds.push(item.id)
        }
      })
      xhrDeleteArticle(checkedIds).then(resp => {
        if (resp.status === 200) {
          this.getList()
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.operationFormVisible = false
        } else {
          this.$message({
            message: resp.msg,
            type: 'error'
          })
        }
      })
    },
    handleAllCheck(value) {
      this.list.forEach((item, index, arr) => {
        if (value) {
          item.checked = true
        } else {
          item.checked = false
        }
      })
    },
    imgClick(src) {
      this.dialogImgSrc = this.imageUrl(src)
      this.dialogFormVisible = true
    },
    closeDialog() {
      this.dialogFormVisible = false
    },
    topicChanged(val) {
      // this.$get("ContentDelivery/getRandomRobot", { topicId: val }).then(
      //   (resp) => {
      //     let robot = resp.data.robot;
      //     this.operationInfo.robotId = robot.uid;
      //     this.operationInfo.sex = robot.sex;
      //     this.operationInfo.nickname = robot.nickname;
      //     this.operationInfo.avatar = this.imgHost + robot.avatar;
      //     this.operationInfo.signature = robot.signature;
      //   }
      // );
    },

    saveAll() {
      // this.$refs["commentsList"].saveAll();
    },
    addToRecommend(id) {
      xhrPublishContent([id]).then(resp => {
        this.getList()
        this.$message.success('操作成功')
        this.operationFormVisible = false
      })
      // this.$get("ContentDelivery/addToRecommend", { id: id }).then((resp) => {
      //   if (resp.status === 0) {
      //     this.getList();
      //     this.$message({
      //       message: "操作成功",
      //       type: "success",
      //     });
      //     this.operationFormVisible = false;
      //   } else {
      //     this.$message({
      //       message: resp.msg,
      //       type: "error",
      //     });
      //   }
      // });
    },
    publishTimeChange(val) {
      let t = new Date(val).getTime()
      this.$get('ContentDelivery/getRandomComment', {
        articleId: this.operationInfo.id,
        publishTime: t
      }).then(resp => {
        this.commentList = this.sortByKey(resp.data.items, 'update')
      })
    },
    deleteItem(id) {
      xhrDeleteArticle([id]).then(resp => {
        if (resp.status === 200) {
          this.getList()
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.operationFormVisible = false
        } else {
          this.$message({
            message: resp.msg,
            type: 'error'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.cs-page-container {
  .photos-list {
    display: flex;
    flex-wrap: wrap;
    li {
      width: 100px;
      height: 100px;
      margin: 5px;
      list-style: none;
      cursor: pointer;
      position: relative;
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
  }

  .video-dialog {
    .el-dialog__body {
      background: #000000;
    }
    .el-dialog__header {
      background: #000000;
    }
    .el-dialog__headerbtn {
      font-size: 22px;
      .el-dialog__close {
        color: #ffffff;
      }
    }
  }

  .video-cover {
    position: relative;
    width: 200px;
    overflow: hidden;
    cursor: pointer;
    .video-play {
      position: absolute;
      opacity: 1;
      z-index: 20;
      top: 50%;
      left: 50%;
      margin-left: -25px;
      margin-top: -25px;
      width: 50px;
      height: 50px;
      color: #ffffff;
      svg {
        width: 100%;
        height: 100%;
      }
      // background: url("/static/image/play-button.png") 12px 11px no-repeat;
    }
  }

  .el-form-item {
    margin-bottom: 10px;
  }
  .img-dialog {
    .el-dialog {
      box-shadow: none;
      background: none;
      .el-dialog__body {
        text-align: center;
      }
    }
  }
  .rec-dialog {
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 90px;
      height: 90px;
      line-height: 90px;
      text-align: center;
    }
    .avatar {
      width: 90px;
      height: 90px;
      display: block;
    }
    .el-upload--picture-card {
      width: 90px;
      height: 90px;
      line-height: 100px;
    }
    .el-upload-list--picture-card .el-upload-list__item {
      width: 90px;
      height: 90px;
    }
    .el-dialog {
      margin-top: 5vh !important;
    }
  }
  .rec-li:hover {
    border: 1px solid #219ae6;
  }
  .rec-li {
    border: 1px solid #cccaca;
    border-radius: 5px;
    margin: 10px 0;

    .rec-li-head {
      padding: 10px;
      border-bottom: 1px solid #cccaca;
      .button-group {
        float: right;
      }
      .el-checkbox__inner {
        margin-top: -2px;
      }
    }
    .rec-li-body {
      padding: 10px;
      display: flex;
      font-size: 14px;
      .rec-li-body-left {
        flex: 1;
        padding-right: 10px;
        .user {
          display: flex;
          .avatar {
            width: 40px;
            height: 40px;
            margin: 5px;
          }
          .username {
            padding: 5px;
            flex: 1;
            p {
              margin: 10px 0 0 0;
            }
            .name {
              margin-right: 20px;
            }
          }
        }
        .tags {
          margin: 10px 0;
        }
        .count {
          span {
            display: inline-block;
            margin: 10px;
          }
        }
      }
      .rec-li-body-right {
        flex: 1;
        .article-images {
          img {
            display: inline-block;
            width: 50px;
            height: 60px;
            margin: 5px 10px;
          }
        }
      }
    }
  }
}
</style>
